<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: Yipin
  Date: 2016/12/1
  Time: 10:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="Downtime Record"/>
</jsp:include>

<jsp:include page="../../include/tenant_header.jsp"/>

<jsp:include page="../../include/tenant_sidebar.jsp"/>
<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title" style="display: inline-block"><spring:message code="label.tenant.offLine.reason.record"/></h4>

        <div class="form-group has-success has-feedback" style="float: right;margin-right: 40px;">
            <input type="text" placeholder="<spring:message code="label.admin.search"/>" class="form-control" id="inputSuccess2"
                   style="border-radius:5px;border-color:#aabfcb">
            <span class="glyphicon glyphicon-search form-control-feedback"></span>
        </div>
    </section>
    <section class="content">
        <div class="box box-primary table-header-line">
            <div class="box-body" style="padding: 0">
                <table class="table" id="downtime_record">
                    <thead>
                    <tr>
                        <th><spring:message code="label.date"/></th>
                        <th><spring:message code="label.device" /></th>
                        <th><spring:message code="label.shift"/></th>
                        <th><spring:message code="label.operator"/></th>
                        <th><spring:message code="label.start.time"/></th>
                        <th><spring:message code="label.end.time"/></th>
                        <th><spring:message code="label.length"/></th>
                        <th><spring:message code="label.reason"/></th>
                        <th><spring:message code="label.tenant.create.description"/></th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <%--</div>--%>
    </section>
</div>

<jsp:include page="../../include/foot.jsp"/>
<script>
    $(document).ready(function () {
        var table = $("#downtime_record").DataTable({
            "dom": '<"datatable-header"<"dataTables_filter">l><"datatable-scroll"t><"datatable-footer dataTable-footer-padding"<"pull-left"i><"pull-right"p>>',
            paging: true,
            lengthChange: false,
            ordering: true,
            autoWidth: false,
            info: true,
            serverSide: false,
            fixedHeader: true,
            searching: true,
            aLengthMenu: [15],
            ajax: {
                url: '/partner/{tenant}/api/v1/getDowntimeRecordList'.replace("{tenant}", getKeyByUrl()),
                dataSrc: 'data'
            },
            columns: [
                {
                    data: 'date_id'
                },
                {
                    data: 'device_unique_id'
                },{
                    data: 'period'
                },
                {
                    data: 'username',
                    render: function (data, type, full, meta) {
                        var usernames = data.split("|||");
                        var divString = $("<div></div>");
                        $.each(usernames, function (index, username) {
                            var $name = "<div>" + username + "</div>";
                            divString.append($name);
                        });
                        return divString.html();
                    }
                },
                {
                    data: 'start_time',
                    render: function (data, type, full, meta) {
                        var startTime = data.split("|||");
                        var divString = $("<div></div>");
                        $.each(startTime, function (index, sTime) {
                            var $time = "<div>" + sTime + "</div>";
                            divString.append($time);
                        });
                        return divString.html();
                    }
                },
                {
                    data: 'end_time',
                    render: function (data, type, full, meta) {
                        var endTime = data.split("|||");
                        var divString = $("<div></div>");
                        $.each(endTime, function (index, eTime) {
                            var $time = "<div>" + eTime + "</div>";
                            divString.append($time);
                        });
                        return divString.html();
                    }
                },
                {
                    data: 'duration',
                    render: function (data, type, full, meta) {
                        var durations = data.split("|||");
                        var divString = $("<div></div>");
                        $.each(durations, function (index, duration) {
                            var $duration = "<div>" + duration + "</div>";
                            divString.append($duration);
                        });
                        return divString.html();
                    }
                },
                {
                    data: 'meta_definition',
                    render: function (data, type, full, meta) {
                        var reason = [];
                        var describe = [];
                        var metas = data.split("|||");
                        $.each(metas, function (index, meta) {
                            if (meta == "poweroff") {
                                reason.push('<spring:message code="label.plan.downtime"/>');
                                describe.push('<spring:message code="label.plan.downtime"/>');
                            } else {
                                var data = JSON.parse(meta);
                                if (data.FaultTypeReason == undefined) {
                                    reason.push(data.IDLEReason);
                                    describe.push(data.IDLEDescription);
                                } else {
                                    reason.push(data.FaultTypeReason);
                                    describe.push(data.FaultTypeDescription);
                                }
                            }
                        });

                        full["describe"] = describe;
                        var divString = $("<div></div>");
                        $.each(reason, function (index, r) {
                            var $reason = "<div>" + r + "</div>";
                            divString.append($reason);
                        });
                        return divString.html();

                    }
                },
                {
                    data: '',
                    "render": function (data, type, full, meta) {
                        var describe = full.describe;
                        var divString = $("<div></div>");
                        $.each(describe, function (i, d) {
                            var $describe = "<div>" + d + "</div>";
                            divString.append($describe);
                        });
                        return divString.html();
                    }
                }
            ],
            "language": {url: '/lang/datatable.chs.json'}
        })
        $('#inputSuccess2').bind('keyup', function (e) {
            table.search(this.value).draw();
        });
    })
</script>